<%--
  Created by IntelliJ IDEA.
  User: 13468
  Date: 2020/5/12
  Time: 15:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/goodlist.css"/>
    <script src="<%=request.getContextPath()%>/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="<%=request.getContextPath()%>/plugins/jquery/jquery-3.4.1.js"></script>
</head>
<body>



<jsp:include page="header.jsp"></jsp:include>



<div class="container" style="margin-top: 30px;">

    <!-- 搜索框 -->
    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-3" style="margin-left: 35px">
            <div class="log">
                <img src="../images/360kad.jpg" alt="图片加载失败"/>
            </div>
        </div>
        <div class="col-md-6" style="padding: 0;margin-top: 15px">
            <form class="bs-example bs-example-form" role="form">
                <div class="input-group">
                    <input type="text" class="form-control" name="goodName" id="goodName" placeholder="请输入商品名称">
                    <span class="input-group-btn">
                            <button class="btn btn-primary" type="button" onclick="selectBySelectiveAndPage()">搜索</button>
                        </span>
                </div>
            </form>
        </div>
    </div>
    <script>
        if (${goodName != null and goodName != ""}){
            $('#goodName').attr("value","${goodName}")
        }
    </script>

    <!-- 商品类别 -->
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8" style="padding: 0;">
            <section class="screen">
                <ul>
                    <li>
                        <span class="firstterm ">品类:</span>
                        <div class="otherterm">
                            <div class="ra">
                                <input type="radio" name="type" class="ra" checked value="" onclick="selectType()">
                                <span>不限</span>
                            </div>
                            <div class="ra">
                                <input type="radio" name="type" class="ra" value="1" onclick="selectType()">
                                <span>药品</span>
                            </div>
                            <div class="ra">
                                <input type="radio" name="type" class="ra" value="2" onclick="selectType()">
                                <span>非药品</span>
                            </div>
                        </div>
                    </li>
                    <div id="type">

                    </div>

                    <li>
                        <span class="firstterm ">价格:</span>
                        <div class="otherterm">
                            <div class="ra">
                                <input class="price" type="text" name="lowrice" id="lowPrice"> &nbsp;-&nbsp;
                                <input class="price" type="text" name="upprice" id="upPrice">元
                            </div>
                        </div>
                    </li>
                </ul>
            </section>
        </div>
    </div>

    <script>
        function selectType() {
            var val = $('input:radio[name="type"]:checked').val()
            if(val == 1){
                var html = '<li style="border-bottom: 1px dashed #dbdbdb;">\n' +
                    '                        <span class="firstterm ">分类:</span>\n' +
                    '                        <div class="otherterm">\n' +
                    '                            <div class="ra">\n' +
                    '                                <input type="radio" name="types" checked value="" onclick="selectBySelectiveAndPage(1)">\n' +
                    '                                <span>不限</span>\n' +
                    '                            </div>\n' +
                    '                            <div class="ra">\n' +
                    '                                <input type="radio" name="types" value="3" onclick="selectBySelectiveAndPage(1)">\n' +
                    '                                <span>感冒发烧</span>\n' +
                    '                            </div>\n' +
                    '                            <div class="ra">\n' +
                    '                                <input type="radio" name="types" value="4" onclick="selectBySelectiveAndPage(1)">\n' +
                    '                                <span>呼吸系统</span>\n' +
                    '                            </div>\n' +
                    '                            <div class="ra">\n' +
                    '                                <input type="radio" name="types" value="5" onclick="selectBySelectiveAndPage(1)">\n' +
                    '                                <span>消化系统</span>\n' +
                    '                            </div>\n' +
                    '                            <div class="ra">\n' +
                    '                                <input type="radio" name="types" value="6" onclick="selectBySelectiveAndPage(1)">\n' +
                    '                                <span>眼耳口鼻</span>\n' +
                    '                            </div>\n' +
                    '                            <div class="ra">\n' +
                    '                                <input type="radio" name="types" value="7" onclick="selectBySelectiveAndPage(1)">\n' +
                    '                                <span>外用常备</span>\n' +
                    '                            </div>\n' +
                    '                        </div>\n' +
                    '                    </li>'
                $('#type').html(html)
            } else if (val == 2) {
                var html = '<li style="border-bottom: 1px dashed #dbdbdb;">\n' +
                    '                            <span class="firstterm ">分类:</span>\n' +
                    '                            <div class="otherterm">\n' +
                    '                                <div class="ra">\n' +
                    '                                    <input type="radio" name="types" checked value="" onclick="selectBySelectiveAndPage(1)">\n' +
                    '                                    <span>不限</span>\n' +
                    '                                </div>\n' +
                    '                                <div class="ra">\n' +
                    '                                    <input type="radio" name="types" value="8" onclick="selectBySelectiveAndPage(1)">\n' +
                    '                                    <span>医用口罩</span>\n' +
                    '                                </div>\n' +
                    '                                <div class="ra">\n' +
                    '                                    <input type="radio" name="types" value="9" onclick="selectBySelectiveAndPage(1)">\n' +
                    '                                    <span>体温计</span>\n' +
                    '                                </div>\n' +
                    '                                <div class="ra">\n' +
                    '                                    <input type="radio" name="types" value="10" onclick="selectBySelectiveAndPage(1)">\n' +
                    '                                    <span>消毒液</span>\n' +
                    '                                </div>\n' +
                    '                                <div class="ra">\n' +
                    '                                    <input type="radio" name="types" value="11" onclick="selectBySelectiveAndPage(1)">\n' +
                    '                                    <span>洗手液</span>\n' +
                    '                                </div>\n' +
                    '                            </div>\n' +
                    '                        </li>'
                $('#type').html(html)
            } else if (val == ''){
                $('#type').html('')
            }

            selectBySelectiveAndPage(1)
        }
    </script>

    <!-- 商品列表-->
    <div class="row" id="goods" style="height: 450px">
        <section class="goodslist" >
            <ul id="goodShow">
<%--                <c:forEach var="good" items="${goodsList}">--%>
<%--                    <li class="col-sm-3">--%>
<%--                        <div class="good">--%>
<%--                            <a href="#">--%>
<%--                                <div class="img">--%>
<%--                                    <img src="<%=request.getContextPath()%>/${good.goodImages}" alt="图片加载失败">--%>
<%--                                </div>--%>
<%--                                <p style="color: black;font-size: 18px">${good.goodName}</p>--%>
<%--                            </a>--%>
<%--                            <p style="color: black;overflow: hidden;height: 20px">${good.goodDetail}</p>--%>
<%--                            <p style="color: red">￥${good.goodPrice}</p>--%>
<%--                        </div>--%>
<%--                    </li>--%>
<%--                </c:forEach>--%>
            </ul>
        </section>
        <div class="col-md-12">&nbsp;</div>
    </div>

    <div id="page">
        <div style="text-align: center">
            <nav aria-label="Page navigation">
                <ul class="pagination" id="showpage">

                </ul>
            </nav>
        </div>
    </div>


    底部导航栏

</div>


<script>
    function selectBySelectiveAndPage(currPage) {
        if (currPage == null ){
            currPage = 1
        }
        var goodName = $('#goodName').val()
        var type = $('input:radio[name="type"]:checked').val()

        var types
        if(type == ''){
            types = ''
        } else {
            types = $('input:radio[name="types"]:checked').val()
        }
        var lowPrice = $('#lowPrice').val()
        var upPrice = $('#upPrice').val()

        $.ajax({
            url:"/pharmacy/goodlist/selectbyselectiveandpage",
            data:"currPage=" + currPage + "&goodName=" + goodName + "&type=" + type + "&types=" + types + "&lowPrice=" + lowPrice + "&upPrice=" + upPrice,
            type:"post",
            dataType:"json",
            success:function (data) {
                console.log(data)
                var html = ''
                if (data.dataList != ''){
                    for (var i = 0; i < data.dataList.length; i++) {
                        html = html + '<li class="col-sm-3">'
                        html = html + '<div class="good">'
                        html = html + '<a href="/pharmacy/good/detail?id=' + data.dataList[i].id + '">'
                        html = html + '<div class="img">'
                        html = html + '<img src="<%=request.getContextPath()%>/' + data.dataList[i].goodImages + '" alt="图片加载失败">'
                        html = html + '</div>'
                        html = html + '<p style="color: black;font-size: 18px">' + data.dataList[i].goodName  + '</p>'
                        html = html + '</a>'
                        html = html + '<p style="color: black;overflow: hidden;height: 20px">' + data.dataList[i].goodDetail + '"</p>'
                        html = html + '<p style="color: red">￥' + data.dataList[i].goodPrice + '</p>'
                        html = html + '</div></li>'
                    }
                    $('#goodShow').html(html)
                    showPage(data.totalSize,data.currPage,data.pageSize)
                } else {
                    html = html + '<div style="text-align: center"><h3>抱歉，未搜索到相关商品</h3></div>'
                    $('#goodShow').html(html)
                    $('#showpage').html('')
                }

            }
        })
    }

    selectBySelectiveAndPage(1)
</script>


<script>

    function showPage(totalSize,currPage,pageSize) {
        var totalPage
        if (totalSize % pageSize == 0){
            totalPage = Math.floor(totalSize/pageSize)
        } else {
            totalPage = Math.floor(totalSize/pageSize + 1)
        }
        console.log(totalSize,currPage,pageSize)
        var html = ''

        if (currPage == 1){
            html = html + '<li class="disabled">'
            // html = html + '<a href="javascript:selectBySelectiveAndPage(1)" aria-label="Previous">'
        } else {
            html = html + '<li>'
            html = html + '<a href="javascript:selectBySelectiveAndPage(' + (currPage-1) + ')" aria-label="Previous">'
        }
        html = html + '<span aria-hidden="true">&laquo;</span>'
        html = html + '</a>'
        html = html + '</li>'

        for (var i = 1; i <= totalPage; i++) {
            html = html + '<li '
            if (currPage == i){
                html = html + 'class="active"'
            }
            html = html + '><a href="javascript:selectBySelectiveAndPage(' + i + ')">' + i + '</a></li>'
        }

        if (currPage == totalPage){
            html = html + '<li class="disabled">'
            // html = html + '<a href="javascript:selectBySelectiveAndPage(' + currPage + ')" aria-label="Next">'
        } else {
            html = html + '<li>'
            html = html + '<a href="javascript:selectBySelectiveAndPage(' + (currPage+1) + ')" aria-label="Next">'
        }
        html = html + '<span aria-hidden="true">&raquo;</span>'
        html = html + '</a>'
        html = html + '</li>'

        $('#showpage').html(html)
    }

    <%--showPage(${pageInfoResult.totalSize},${pageInfoResult.currPage},${pageInfoResult.pageSize})--%>
</script>


<%--<script>--%>
<%--    function page(currPage) {--%>
<%--        $.ajax({--%>
<%--            url:"/pharmacy/goodlist/selectallbypage",--%>
<%--            data:"currPage=" + currPage,--%>
<%--            type:"post",--%>
<%--            dataType: "json",--%>
<%--            success:function (data) {--%>
<%--                console.log(data)--%>
<%--                var html = ''--%>
<%--                if (data.dataList != ''){--%>
<%--                    for (var i = 0; i < data.dataList.length; i++) {--%>
<%--                        html = html + "<li class=\"col-sm-3\">\n" +--%>
<%--                            "                        <div class=\"good\">\n" +--%>
<%--                            "                            <a href=\"#\">\n" +--%>
<%--                            "                                <div class=\"img\">"--%>

<%--                        html = html + '<img src="<%=request.getContextPath()%>/' + data.dataList[i].goodImages + '" alt="图片加载失败">'--%>
<%--                        html = html + '</div>'--%>
<%--                        html = html + '<p style="color: black;font-size: 18px">' + data.dataList[i].goodName  + '</p>'--%>
<%--                        html = html + '</a>'--%>
<%--                        html = html + '<p style="color: black;overflow: hidden;height: 20px">' + data.dataList[i].goodDetail + '"</p>'--%>
<%--                        html = html + '<p style="color: red">￥' + data.dataList[i].goodPrice + '</p>'--%>
<%--                        html = html + '</div></li>'--%>
<%--                    }--%>
<%--                    $('#goodShow').html(html)--%>
<%--                }--%>
<%--                showPage(data.totalSize,data.currPage,data.pageSize)--%>
<%--            }--%>
<%--            --%>
<%--        })--%>
<%--    }--%>
<%--</script>--%>

</body>
</html>
